<template>
    <div>
        <div v-if="type == 'fail'">
            <div class="colorFFF flexSB">
                <div class="size18 colorFFF"></div>
                <div @click="onJump('/wallet/withdrawal-record')" class="block color999 hand">提现记录</div>
            </div>

            <div class="colorFFF size24 sizeCenter marginTop30">{{$store.state.config.coin_name}}提现</div>

            <div class style="width: 85%;margin: 30px auto">
                <div class="size48 colorFF1C6D sizeCenter">{{user_info.withdraw_balance}}</div>
                <div class="size12 color999 sizeCenter">可提现{{$store.state.config.coin_name}}</div>

                <div class="flexFS marginTop50">
                    <div style="width: 100px;">提现数量</div>

                    <el-input placeholder="请输入提现数量" style="width: 300px;" v-model="form.money">
                        <template slot="suffix">
                            <div @click="form.money=user_info.withdraw_balance" class="colorFF1C6D pt-10 pr-10 font-15 cursor-pointer">全部提现</div>
                        </template>
                    </el-input>
                </div>

                <div class="marginTop30">
                    提现账户
                    <span class="size14 color999" style="margin-left: 30px;">请选择到账银行卡</span>
                </div>
                <el-row :gutter="20" class="marginTop30" style="margin-left: 90px;">
                    <el-col :span="8" class="marginBottom20">
                        <div @click="toAdd" class="rechargeBox flexFS hand" style="position: relative;">
                            <div class="size25 color999 pl-15" style>
                                <i class="el-icon-circle-plus-outline"></i>
                            </div>
                            <div class="color999" style="margin-left: 10px;">添加银行卡</div>
                        </div>
                    </el-col>
                    <el-col :key="index" :span="8" class="marginBottom20" v-for="(item, index) in my_banks">
                        <div :class="{ selectBox: index == select }" @click="select = index" class="rechargeBox flexFS hand" style="position: relative;">
                            <div class="size18 colorFF1C6D flexSB pl-5" style>
                                <img :src="item.bank_info.icon" alt srcset style="width: 35px;margin-right: 10px;" />
                            </div>
                            <div class="size14 color-333">
                                <div>{{item.bank_info.name}}</div>
                                <div>{{item.card_number | truncateString}}</div>
                            </div>
                            <div class="recommend colorFFF" v-if="index == select">
                                <img alt src="@/assets/wallet/txxz.png" srcset style="width: 30px;" />
                            </div>
                        </div>
                    </el-col>
                </el-row>

                <div class="marginTop30">
                    <el-button @click="rechargeFun" class style="width: 200px;background-color: #FF1C6D;border: none;margin-left: 100px;" type="primary">立即提现</el-button>
                </div>
            </div>
        </div>

        <div class="no-tip" v-else>
            <img src="@/assets/wallet/fbcg.png" />
            <div class="size20 color333">提现成功</div>
            <div class="size14 color999 marginTop10">等待平台审核</div>
        </div>

        <el-dialog :before-close="handleClose" :visible.sync="dialogVisible" title width="35%">
            <div class="sizeCenter">
                <div>
                    <span class="size20 color333">提现{{$store.state.config.coin_name}}</span>
                </div>
                <div class="mt-5">
                    <span class="font-40 colorFF1C6D">{{ form.money }}</span>
                </div>

                <div class="marginTop50" id="payPwd" style="width: 70%; margin: 50px auto;">
                    <div class="font-16" style="text-align: left;margin-left: 42px;">请输入支付密码</div>
                    <div class="marginTop30"></div>

                    <el-input :autofocus="autofocus" id="myInput" maxlength="6" placeholder="请输入内容" ref="pwd" style="opacity: 0;position: absolute;" v-model="msg"></el-input>
                    <ul @click="focus" class="pwd-wrap">
                        <li :class="{ selectBox: msgLength > 0 }" :style="msg.length == 0 ? 'border: #FF1C6D 1px solid' : ''">
                            <i v-if="msgLength > 0"></i>
                        </li>
                        <li :style="msg.length == 1 ? 'border: #FF1C6D 1px solid' : ''">
                            <i v-if="msgLength > 1"></i>
                        </li>
                        <li :style="msg.length == 2 ? 'border: #FF1C6D 1px solid' : ''">
                            <i v-if="msgLength > 2"></i>
                        </li>
                        <li :style="msg.length == 3 ? 'border: #FF1C6D 1px solid' : ''">
                            <i v-if="msgLength > 3"></i>
                        </li>
                        <li :style="msg.length == 4 ? 'border: #FF1C6D 1px solid' : ''">
                            <i v-if="msgLength > 4"></i>
                        </li>
                        <li :style="msg.length == 5 ? 'border: #FF1C6D 1px solid' : ''">
                            <i v-if="msgLength > 5"></i>
                        </li>
                    </ul>
                </div>

                <div class="marginTop70">
                    <el-button :loading="loading" @click="withdrawalFun" class size="big" style="width: 300px;background-color: #FF1C6D;border: none;" type="primary">立即提现</el-button>
                </div>
            </div>
        </el-dialog>

        <add-bank @refresh="getMyBank" ref="add"></add-bank>
    </div>
</template>

<script>
import addBank from './add-bank.vue'
export default {
    components: {
        addBank,
    },
    data() {
        return {
            select: 0,
            form: {
                money: '',
            },
            dialogVisible: false,
            msg: '',
            msgLength: 0,
            autofocus: true,
            type: 'fail', //fail未提现  success提现成功
            my_banks: [],
            loading: false,
        }
    },
    computed: {
        user_info() {
            return this.$store.state.user.user
        },
    },
    watch: {
        msg(curVal) {
            if (/[^\d]/g.test(curVal)) {
                this.msg = this.msg.replace(/[^\d]/g, '')
            } else {
                this.msgLength = curVal.length
            }
        },

        dialogVisible() {
            setTimeout(() => {
                this.$refs.pwd.focus()
            }, 500)
        },
    },
    mounted() {
        this.getMyBank()
    },
    methods: {
        toAdd() {
            this.$refs.add.visible = true
        },
        focus() {
            this.$refs.pwd.focus()
        },
        withdrawalFun() {
            if (!this.my_banks[this.select]) {
                this.$message.error('请先选择银行卡')
                return false
            }
            if (this.msg.length != 6) {
                this.$message.error('请输入正确的资金密码')
                return false
            }

            let param = {
                bank_id: this.my_banks[this.select].id,
                fun_password: this.msg,
                ...this.form,
            }

            this.loading = true
            this.$request
                .post('/withdraw/create', param)
                .then((res) => {
                    this.$store.dispatch('user/decrementBalance', { money: this.form.money, type: 'withdraw_balance' })
                    this.type = 'success'
                    this.dialogVisible = false
                    this.msg = ''
                })
                .catch((error) => {})
                .finally((res) => {
                    this.loading = false
                })
        },
        rechargeFun() {
            if (!this.form.money) {
                this.$message({
                    message: '请输入充值金额！',
                    type: 'warning',
                })
                return
            }

            this.autofocus = true
            this.dialogVisible = true
        },

        getMyBank() {
            this.$request
                .get('/user/bank/index', { page: 1, size: 100 })
                .then((res) => {
                    this.my_banks = res.items
                    console.log(this.my_banks)
                })
                .catch((error) => {})
                .finally((res) => {})
        },
        handleClose() {
            this.dialogVisible = false
        },
        onJump(url) {
            this.$router.push(url)
        },
    },
}
</script>

<style lang="scss" scoped>
.rechargeBox {
    height: 96px;
    background-color: #fff;
    box-sizing: border-box;
    border: 1px solid #e2e2e2;
    padding: 5px;
    border-radius: 4px;
}

.recommend {
    position: absolute;
    top: 0;
    right: 0;
}

.codeBox {
    padding: 10px;
    border: 1px dashed #999;
    width: 250px;
    margin: 30px auto;
}

#payPwd .pwd-wrap {
    width: 400px;
    height: 60px;
    padding-bottom: 1px;
    margin: 0 auto;
    background: #fff;

    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    cursor: pointer;
}

.pwd-wrap li {
    list-style-type: none;
    text-align: center;
    line-height: 60px;
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-flex: 1;
    border: 1px solid #ddd;
    width: 50px !important;
    margin-right: 3px;
}

.pwd-wrap li i {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #525252;
    display: inline-block;
}

.selectBox {
    border: 1px solid #ff1c6d;
}
.no-tip {
    color: #999;
    font-size: 30px;
    width: 100%;
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;

    img {
        width: 150px;
    }
}
</style>